<template>
    <div class="flex">
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <a-card>
                <TableTools @onAddRecord="onAddRecord"></TableTools>
                <a-table
                    :pagination="{
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    size="middle"
                    :loading="tableLoading"
                    @change="handleTableChange"
                >
                    <template #operation="{ record }">
                        <a-space>
                            <a-button @click="onEdit(record)">编辑</a-button>
                            <a-button @click="onDel(record.id)">删除</a-button>
                            <a-button @click="onPreview(record.yldz)"
                                >预览</a-button
                            >
                        </a-space>
                    </template>
                </a-table>
            </a-card>
            <a-modal
                width="800px"
                centered
                :visible="visible"
                :title="title"
                @cancel="handleCancel"
            >
                <ModalForm :form="form" :validateInfos="validateInfos"></ModalForm>
                <template #footer>
                    <a-button key="back" @click="handleCancel">关闭</a-button>
                    <a-button
                        key="submit"
                        type="primary"
                        :loading="loading"
                        @click="handleOk"
                        >确认</a-button
                    >
                </template>
            </a-modal>
        </div>
    </div>
</template>

<script lang="ts">
import { TableStateFilters } from "ant-design-vue/es/table/interface";
import * as API from "@/api/web-service-insert";
import { SnippetsOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import form, { resetFields, validate, validateInfos } from "./useForm";
import ModalForm from "./components/modalForm.vue";
import Search from "./components/search.vue";
import TableTools from "./components/tableTools.vue";
import { message } from "ant-design-vue";
import { onHandleCode, tagColor } from "@/filter/index";
import { Item } from "./type";
interface FormState {
    sjmc: string;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
}
export default defineComponent({
    name: "webServiceInsert",
    setup() {
        const formState = reactive<FormState>({
            sjmc: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
        });
        const columns = [
            { title: "数据名称", dataIndex: "sjmc", key: "sjmc" },
            { title: "数据描述", dataIndex: "sjms", key: "sjms" },
            { title: "数据提供商", dataIndex: "sjtgcs", key: "sjtgcs" },
            { title: "数据提供方平台", dataIndex: "sjtgfpt", key: "sjtgfpt" },
            {
                title: "操作",
                key: "operation",
                slots: { customRender: "operation" },
            },
        ];
        const {
            total,
            repositories,
            getUserRepositories,
        } = useRepositoryNameSearch(formState);
        onMounted(getUserRepositories);
        const store = reactive({
            tableLoading: false,
            loading: false,
            visible: false,
            title: "",
            type: 1,
            onSearchList: (formState: FormState) => {
                store.tableLoading = true;
                formState = formState;
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            handleTableChange: (
                pagination: any,
                filter: TableStateFilters,
                sorter: any
            ) => {
                store.tableLoading = true;
                formState.pageNum = pagination.current;
                if (sorter && sorter.order) {
                    formState.isAsc =
                        sorter.order === "ascend" ? "asc" : "desc";
                    formState.orderByColumn = sorter.field;
                }
                getUserRepositories().then(() => {
                    store.tableLoading = false;
                });
            },
            onDel(ids: string) {
                API.delListApi(ids).then(({ msg }: any) => {
                    getUserRepositories();
                    message.success(msg);
                });
            },
            onEdit(record: Item) {
                Object.keys(record).forEach((e) => {
                    form[e] = record[e];
                });
                store.visible = true;
                store.title = "编辑记录";
                store.type = 2;
            },
            onPreview(yldz: string) {
                window.open(yldz);
            },
            onAddRecord(bool: boolean) {
                store.visible = bool;
                store.title = "新增记录";
                store.type = 1;
            },
            handleOk() {
                store.type === 1
                    ? validate().then(() => {
                          API.addListApi(form).then(({ msg }: any) => {
                              getUserRepositories();
                              message.success(msg);
                              store.visible = false;
                              resetFields();
                          });
                      })
                    : API.editListApi(form).then(({ msg }: any) => {
                          getUserRepositories();
                          message.success(msg);
                          store.visible = false;
                      });
            },
            handleCancel() {
                store.loading = false;
                store.visible = false;
                resetFields();
            },
        });
        return {
            form,
            total,
            formState,
            repositories,
            columns,
            tagColor,
            onHandleCode,
            validateInfos,
            ...toRefs(store),
        };
    },
    components: {
        SnippetsOutlined,
        Search,
        ModalForm,
        TableTools,
    },
});
</script>